<template>
  <div>
    <el-dialog title="题目预览" :visible.sync="p_isShow" width="50%" @opened="simpleData">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <span>【题型】：{{ question }}</span>
        </el-col>
        <el-col :span="6" :offset="0">
          <span>【编号】：{{ titleInfo.id }}</span>
        </el-col>
        <el-col :span="6" :offset="0">
          <span>【难度】：{{ difficulty }}</span>
        </el-col>
        <el-col :span="6" :offset="0">
          <span>【标签】：{{ titleInfo.tags }}</span>
        </el-col>
      </el-row>
      <br>
      <br>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <span>【学科】：{{ simple }}</span>
        </el-col>
        <el-col :span="6" :offset="0">
          <span>【目录】：{{ titleInfo.directoryName }}</span>
        </el-col>
        <el-col :span="6" :offset="0">
          <span>【方向】：{{ titleInfo.direction }}</span>
        </el-col>
      </el-row>
      <br>
      <br>
      <hr>
      <p>【题干】:
        <span v-html="titleInfo.question" />
      </p>
      <p v-if="titleInfo.questionType === '1'">
        <span>单选题 选项：（以下选中的选项为正确答案）</span><br><br>
        <el-radio-group :value="radio1">
          <el-radio v-for=" item in titleInfo.options" :key="item.id" :label="item.id">{{ item.title }}</el-radio>
        </el-radio-group>
      </p>
      <p v-else-if="titleInfo.questionType === '2'">
        <span>多选题 选项：（以下选中的选项为正确答案）</span><br><br>
        <el-checkbox-group :value="checked">
          <el-checkbox v-for=" item in titleInfo.options" :key="item.id" :label="item.title" />
        </el-checkbox-group>
      </p>
      <p v-else />
      <hr>
      <p>
        【参考答案】:<el-button
          type="danger"
          size="default"
          @click="videoShow ? (videoShow = false) : (videoShow = true)"
        >视频答案预览</el-button>
      </p>
      <div v-if="videoShow">
        <video width="320" height="240" controls>
          <source :src="titleInfo.videoURL" type="video/mp4">
        </video>
      </div>
      <hr>
      <p>【答案解析】：<span v-html="titleInfo.answer" /></p>
      <hr>
      <p>【题目备注】：{{ titleInfo.remarks }}</p>
      <span slot="footer">
        <el-button type="primary" @click="p_isShow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Preview',
  props: {
    // eslint-disable-next-line vue/prop-name-casing
    SimpleInfoList: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },
  data() {
    return {
      p_isShow: false,
      videoShow: false,
      title_id: '', // 题目id
      simple: '', // 学科
      titleInfo: {
        questionType: '', // 题型
        number: '', // 编号
        difficulty: '', // 难度
        tags: '', // 标签
        subjectID: '', // 学科
        catalogID: '', // 目录
        direction: '', // 方向
        question: '', // 题干
        videoURL: '', // 解析视频
        answerID: '', // 答案解析
        remarks: '' // 题目备注
      } // 题目数据
    }
  },
  computed: {
    question() {
      let str = ''
      if (this.titleInfo.questionType === '1') {
        str = '单选'
      } else if (this.titleInfo.questionType === '2') {
        str = '多选'
      } else {
        str = '简答'
      }
      return str
    },

    difficulty() {
      if (this.titleInfo.difficulty === '1') {
        return '简单'
      } else if (this.titleInfo.difficulty === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    radio1() {
      let str = ''
      this.titleInfo.options.forEach(item => {
        if (item.isRight === 1) {
          str = item.id
        }
      })
      return str
    },
    checked() {
      const arr = []
      this.titleInfo.options.forEach(item => {
        if (item.isRight === 1) {
          arr.push(item.title)
        }
      })
      return arr
    }
  },

  created() {

  },
  methods: {
    simpleData() {
      const obj = this.SimpleInfoList.find(item => item.value === this.titleInfo.subjectID)
      console.log(obj)
      this.simple = obj.label
    }
  }
}
</script>

<style scoped lang="scss"></style>
